uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

您所在的位置：网站首页 › uniapp input 数值大小限制 › uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

2023-09-08 21:31| 来源: 网络整理| 查看: 265

背景：需求要求密码输入框不能输入空格，于是找到easyinput的 trim API，但是通过测试，发现去除空格的方法时不时“失效”，哪怕使用 trim="all"，依旧会存在最后面的空格在输入框没有自动删除的情况。然而通过打印绑定值发现，绑定值生效，并没有空格，但没有更新到输入框。通过查看easyinput的代码和生效过程，发现是原生input赋值没有及时生效的缘故，因此我们修改下源代码：在ui-modules中找到uni-easyinput.vue，修改onInput方法：

给赋值的val增加this.$nextTick() onInput(event) { let value = event.detail.value; // 判断是否去除空格 if (this.trim) { if (typeof(this.trim) === 'boolean' && this.trim) { value = this.trimStr(value) } if (typeof(this.trim) === 'string') { value = this.trimStr(value, this.trim) } }; if (this.errMsg) this.errMsg = '' // 修改===输入空格在输入框没有渲染问题 this.val = null this.$nextTick(function() { this.val = value }) // TODO 兼容 vue2 this.$emit('input', value); // TODO　兼容　vue3 this.$emit('update:modelValue', value) },

到这里，就已经解决了trim没有渲染的问题。

期间，需求增加验证码输入框不能输入非数字的字符验证，在@input方法内再增加this.$nextTick()就可：

inputChange(value) { let that = this this.$nextTick(() => { that.formData.authCode = value.replace(/\D+/g, '') }) }

其后，需求又增加了密码框不能输入中文校验，这时用上面的this.$nextTick竟然没有生效，打断点发现，是我们逻辑的this.$nextTick走在了我们第一步给原生赋值的前面，使没有渲染上，因此采用setTimeout，生效。如下：

pwdInput(val) { setTimeout(() => { let pwd = val.replace(/[\u4e00-\u9fa5]/g, '') this.$set(this.formData, 'loginPwd', pwd) }, 100) }

因此，综上场景和测试，使绑定数据正则之后在逻辑层和渲染层都生效的方法是：

如第一步，修改easyinput赋值方法同第三步，在逻辑层用setTimeout，保证赋值之后的渲染

上面的第二个方法，有一定随机性，还是拥抱setTimeout吧！~

【本文地址】

uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

uniapp：easyinput输入框数据正则处理后，逻辑层更新，但没有渲染到输入框

今日新闻

推荐新闻